<template>
  <div class="map-picker">
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="mapReady" @click="handleMapClick"
      :scroll-wheel-zoom="true">
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!-- <bm-local-search :keyword="searchKeyword" :auto-viewport="true" :location="center"
        @searchcomplete="handleSearchComplete" panel="searchResultPanel" ></bm-local-search> -->
      <bm-marker v-if="selectedPoint" :position="selectedPoint"></bm-marker>
      <!-- <bm-marker v-if="selectedPoint" :position="selectedPoint" animation="BMAP_ANIMATION_BOUNCE"></bm-marker> -->
    </baidu-map>

    <!-- <div class="info-panel" panel="searchResultPanel"  v-if="selectedPoint">
      <h3>选择的位置信息</h3>
      <p>经度: {{ selectedPoint.lng }}</p>
      <p>纬度: {{ selectedPoint.lat }}</p>
      <p>地址: {{ address || '正在获取...' }}</p>
    </div> -->
  </div>
</template>

<script>
  import {
    BaiduMap,
    BmGeolocation,
    BmMarker,
    BmLocalSearch
  } from 'vue-baidu-map-3x'

  export default {
    name: 'MapPicker',
    emits: ['point-selected'],
    props: ({
      longitude: {
        type: Number,
      },
      latitude: {
        type: Number,
      }
    }),
    setup(props, {
      emit
    }) {
      const center = ref({
        lng: 116.404,
        lat: 39.915
      }) // 默认中心点-天安门
      const zoom = ref(15)
      const selectedPoint = ref(null)
      const address = ref('')
      const BMap = ref(null)
      const mapInstance = ref(null)

      const searchKeyword = ref('')
      const searchLocation = ref('北京')

      const mapReady = ({
        BMap: bmap,
        map
      }) => {
        BMap.value = bmap
        mapInstance.value = map
        console.log('地图初始化完成')
        selectedPoint.value = {
          lng: props.longitude,
          lat: props.latitude
        }
      }

      const handleMapClick = (e) => {
        selectedPoint.value = {
          lng: e.point.lng,
          lat: e.point.lat
        }

        // 使用地理编码器获取地址
        const geoc = new BMap.value.Geocoder()
        geoc.getLocation(e.point, (res) => {
          if (res) {
            address.value = res.address
            const pointInfo = {
              ...selectedPoint.value,
              address: res.address
            }
            emit('point-selected', pointInfo)
          }
        })
      }

      const handleSearchComplete = (results) => {
        if (results && results.getNumPois() > 0) {
          const firstResult = results.getPoi(0)
          selectedPoint.value = {
            lng: firstResult.point.lng,
            lat: firstResult.point.lat
          }
          address.value = firstResult.address
        }
      }

      return {
        center,
        zoom,
        selectedPoint,
        address,
        mapReady,
        handleMapClick
      }
    }
  }
</script>

<style scoped>
  .map-picker {
    position: relative;
    width: 100%;
    height: 500px;
  }

  .bm-view {
    width: 100%;
    height: 100%;
  }

  .info-panel {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 100;
    max-width: 300px;
  }
</style>
